<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>员工列表</title>
</head>
<body>
<table border="1">
  <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>部门名称</th>
    <th>第一月工资</th>
    <th>第二月工资</th>
    <th>总工资</th>
    <th>操作</th>
    <th>操作</th>
  </tr>
  <tr th:each="emp : ${emps}">
    <td th:text="${emp.id}"></td>
    <td th:text="${emp.name}"></td>
    <td th:text="${emp.deptName}"></td>
    <td th:text="${emp.firstSal}"></td>
    <td th:text="${emp.secondSal}"></td>
    <td th:text="${emp.firstSal+emp.secondSal}"></td>
    <td>
      <a th:href="@{/edit/{id}(id=${emp.id})}">编辑</a>
    </td>
    <td>
    <a th:href="@{/delete/{id}(id=${emp.id})}">删除</a>
    </td>
  </tr>
</table>
<a href="/allSalary">查看工资汇总</a><br>
<a href="/add">添加新员工</a>
</body>
</html>
<!--
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工列表</title>
    &lt;!&ndash; Tailwind CSS &ndash;&gt;
    <script src="https://cdn.tailwindcss.com"></script>

    &lt;!&ndash; 配置Tailwind自定义颜色 &ndash;&gt;
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 蓝色主色调
                    },
                },
            }
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
    &lt;!&ndash; 标题区域 &ndash;&gt;
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">员工列表</h1>
        <a href="/add" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-colors">
            添加新员工
        </a>
    </div>

    &lt;!&ndash; 表格 &ndash;&gt;
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <table class="w-full">
            <thead>
            <tr class="bg-gray-50">
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门名称</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">第一月工资</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">第二月工资</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总工资</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
            <tr th:each="emp : ${emps}" class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" th:text="${emp.id}"></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" th:text="${emp.name}"></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" th:text="${emp.deptName}"></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" th:text="${emp.firstSal}"></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" th:text="${emp.secondSal}"></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600" th:text="${emp.firstSal+emp.secondSal}"></td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <div class="flex space-x-2">
                        <a th:href="@{/edit/{id}(id=${emp.id})}" class="text-yellow-600 hover:text-yellow-900">编辑</a>
                        <a th:href="@{/delete/{id}(id=${emp.id})}" class="text-red-600 hover:text-red-900" onclick="return confirm('确定要删除吗?')">删除</a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        &lt;!&ndash; 空状态 &ndash;&gt;
        <div th:if="${#lists.isEmpty(emps)}" class="py-12 text-center">
            <p class="text-gray-500">暂无员工数据</p>
        </div>
    </div>

    &lt;!&ndash; 工资汇总链接 &ndash;&gt;
    <div class="mt-6">
        <a href="/allSalary" class="inline-flex items-center text-primary hover:text-primary/80 font-medium">
            <span>查看工资汇总</span>
            <i class="fa fa-arrow-right ml-2"></i>
        </a>
    </div>
</div>
</body>
</html>
-->
